<template>
  <div>
    <div class="form-wrap">
      <div class="input-field">
        <span class="label mark">+86</span>
        <span class="input-block">中国</span>
      </div>
      <div class="input-field" style="position:relative">
        <span class="label">手机号</span>
        <div class="input-block">
          <input
            v-model="form.phone"
            class="input-block2"
            type="number"
            placeholder="填写手机号"
            placeholder-class="placeholder-part"
            maxlength="11"
          />
          <ButtonNormalMsg :phone="form.phone" type="PHONE_CHECK" />
        </div>
      </div>
      <div v-for="item in list" :key="item.key" class="input-field">
        <span class="label">{{item.label}}</span>
        <input
          v-model="form[item.key]"
          class="input-block"
          type="text"
          :password="item.password"
          :placeholder="item.placeholder"
          placeholder-class="placeholder-part"
          :maxlength="item.maxlength"
        />
      </div>
      <div v-if="needAdminId" class="input-field">
        <span class="label">店铺</span>
        <picker
          class="filter-picker"
          :range="adminList"
          range-key="shopName"
          @change="handleStateChange"
        >
          <span>{{changeName}}</span>
        </picker>

        <!-- <select v-model="loginAdminId">
          <option
            v-for="(item,idx) in adminList"
            :key="idx"
            :value="item.adminId"
          >{{item.shopName}}</option>
        </select>-->
      </div>
      <button class="btn-color-blue" @click="handleResetPassword">确定</button>

      <span class="forget" @click="goBack">回到登录</span>
    </div>
  </div>
</template>

<script>
import ButtonNormalMsg from '@/components/ButtonNormalMsg'
import { encryptMD5 } from '@/utils'
import {
  // UPDATE_PASSWORD_BY_PHONE,
  CHECK_ADMIN,
  UNDATE_PWD_BY_CODE
} from '@/api'

export default {
  components: { ButtonNormalMsg },
  props: {},
  data () {
    return {
      form: { phone: '' },
      list: [
        {
          label: '验证码',
          key: 'validateCode',
          placeholder: '输入验证码',
          password: false,
          maxlength: 6
        },
        {
          label: '新密码',
          key: 'newPassword',
          placeholder: '6-20位登录密码',
          password: true,
          maxlength: 999
        },
        {
          label: '确认密码',
          key: 'rePassword',
          placeholder: '6-20位登录密码',
          password: true,
          maxlength: 999
        }
      ],
      adminList: [],
      needAdminId: false,
      loginAdminId: null,
      changeName: '请选择店铺修改密码'
    }
  },
  computed: {
    account () {
      return this.$store.state.account
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.init()
  },
  methods: {
    handleResetPassword () {
      if (!this.form.validateCode) {
        this.$toast('请输入验证码')
      } else if (!this.form.newPassword) {
        this.$toast('请输入新密码')
      } else if (!this.form.rePassword) {
        this.$toast('请再次输入新密码')
      } else if (this.form.newPassword !== this.form.rePassword) {
        this.$toast('两次输入的密码不一致')
      } else if (
        this.form.newPassword.length < 6 ||
        this.form.newPassword.length > 20
      ) {
        this.$toast('密码设置应为6~20位')
      } else {
        // this.resetPass()
        if (this.needAdminId) {
          if (!this.loginAdminId) {
            this.$toast('请选择修改的店铺')
          } else {
            this.resetPass()
          }
        } else {
          this.login1st()
        }
      }
    },
    goBack () {
      this.$router.go(-1)
    },
    login1st () {
      const vm = this

      CHECK_ADMIN(vm.form.phone)
        .then(r => {
          if (r.data.code === '0') {
            let shopList = []
            if (r.data.data.constructor === Array) {
              shopList.push(...r.data.data)
            } else if (r.data.data.constructor === Object && r.data.data) {
              shopList.push(r.data.data)
            }

            if (shopList.length) {
              if (shopList.length > 1) {
                vm.adminList = shopList
                vm.needAdminId = true
              } else {
                vm.loginAdminId = shopList[0].adminId
                this.resetPass()
              }
            } else {
              vm.$toast('未找到该用户')
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    handleStateChange (e) {
      const vm = this
      let value = Number(e.target.value)
      for (let i = 0; i < vm.adminList.length; i++) {
        if (i === value) {
          vm.changeName = vm.adminList[i].shopName

          vm.loginAdminId = vm.adminList[i].adminId
          vm.resetPass()
          return false
        }
      }
    },

    resetPass () {
      const vm = this

      let params = {
        // cellphone: vm.form.phone,
        newPwd: encryptMD5(vm.form.newPassword),
        rePwd: encryptMD5(vm.form.rePassword),
        // providerId: vm.account.providerId,
        code: vm.form.validateCode,
        adminId: vm.loginAdminId
      }

      UNDATE_PWD_BY_CODE(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('更新成功', '').then(() => {
              vm.$router.go(-1)
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    init () {
      const vm = this
      vm.form = {
        phone: ''
      }
      vm.adminList = []
      vm.needAdminId = false
      vm.loginAdminId = null
      vm.changeName = '请选择店铺修改密码'
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';

.form-wrap {
  .input-block2 {
    width: calc(100% - 100px);
  }
  > .btn-color-blue {
    margin-top: 30px;
  }
  > .forget {
    color: $blue;
    font-size: 14px;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
